<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>XML可扩展标记语言</title>
	<link rel="stylesheet" href="./css/nprogress.css">
</head>
<body>

	<!-- XML可扩展标记语言：
		1、XML可扩展标记语言：他的作用是传输和存储数据
		2、XML DOM即XML文档对象模型,是w3c组织定义的一套操作XML文档对象的api。浏览器会将XML文档解析成文档对象模型
		  
		 -->

		 <!-- 布局 -->
		 <button id="btn">发送请求</button>
		 <div id="container"></div>








	<!-- js代码部分 -->
	
	<script type="text/javascript">
		// 抓元素
		var btn = document.getElementById('btn');
		var container = document.getElementById('container');

		// 给按钮添加单击事件
		btn.onclick=function(){
			var xhr = new XMLHttpRequest();
			xhr.open("get", "/xml");
			xhr.send();
			xhr.onload=function(){
				// xhr.responseXML 是获取服务器返回来的XML数据
				var xmlDocument = xhr.responseXML;
				var title =xmlDocument.getElementsByTagName("title")[0].innerHTML;
				container.innerHTML=title;

			}
		}

		



	

	
		

	</script>
	
	






</body>
</html>